<template>
  <w-table
    :searchInputList="searchInputList"
    :searchToolBtn="searchToolBtn"
    :columns="columns"
    :operation="operation"
    :queryData="getPlan2Api"
    ref="wtable"
  />
</template>

<script lang="ts" setup>
  import { TableColumnsType } from 'ant-design-vue'
  import { getPlan2Api, uploadPlan2Api, deletePlan2Api, exportPlay3Api } from '@/api/cable/plan'

  // 表格搜索区域的 输入框列表
  const searchInputList = reactive<TableSearchInput[]>([
    {
      key: 'username',
      label: '项目编号',
      type: 'input',
    },
    {
      key: 'username',
      label: '项目名称',
      type: 'input',
    },
    {
      key: 'username',
      label: '电缆名称',
      type: 'input',
    },
    {
      key: 'status',
      label: '完成状态',
      type: 'select',
      list: [
        { label: '正常', value: '1' },
        { label: '禁用', value: '0' },
      ],
    },
  ])

  // 表格搜索区域 额外按钮
  const searchToolBtn = ref<TableTools[]>([
    {
      type: 'upload',
      label: '导入',
      uploadUrl: uploadPlan2Api,
      condition: 'user:add', // 每一个用户都需要配置的权限标识
      handleClick: () => {
        console.log('点击了')
      },
    },
    {
      type: 'text',
      label: '导出',
      condition: 'user:add', // 每一个用户都需要配置的权限标识
      handleClick: () => {
        console.log('点击了')
        exportPlay3Api({ _t: new Date().getTime() }).then((res) => {
          const data = new Blob([res], {
            type: 'application/vnd.ms-excel;charset=utf-8',
          })
          const downloadUrl = window.URL.createObjectURL(data)
          const anchor = document.createElement('a')
          anchor.href = downloadUrl
          anchor.download = '表格名称.xlsx' // 表格名称.文件类型
          anchor.click()
          window.URL.revokeObjectURL(res.data) // 消除请求接口返回的list数据
        })
      },
    },
  ])

  // 表格的列字段 配置
  const columns: TableColumnsType = [
    {
      title: '项目编号',
      dataIndex: 'id',
      key: 'id',
      width: 200,
    },
    {
      title: '项目名称',
      dataIndex: 'engName',
      key: 'engName',
      width: 200,
    },
    {
      title: '电缆名称',
      dataIndex: 'cableName',
      key: 'cableName',
      width: 200,
    },
    {
      title: '电压等级',
      dataIndex: 'voltageGrade',
      key: 'voltageGrade',
      width: 200,
    },
    {
      title: '电线截面',
      dataIndex: 'cableCross',
      key: 'cableCross',
      width: 200,
    },
    {
      title: '预计抽取长度',
      dataIndex: 'samplingLength',
      key: 'samplingLength',
      width: 200,
    },
    {
      title: '抽取日期',
      dataIndex: 'samplingDate',
      key: 'samplingDate',
      width: 150,
    },
    {
      title: '入库状态',
      dataIndex: 'status_dictText',
      key: 'status_dictText',
      width: 100,
    },
    {
      title: '入库数量',
      dataIndex: 'alreadyDeliverStorage',
      key: 'alreadyDeliverStorage',
      width: 100,
    },
    {
      title: '出库状态',
      dataIndex: 'address',
      key: 'address',
      width: 100,
    },
    {
      title: '出库数量',
      dataIndex: 'alreadyReceivingStorage',
      key: 'alreadyReceivingStorage',
      width: 100,
    },
    {
      title: '派单状态',
      dataIndex: 'sendOrdersState',
      key: 'sendOrdersState',
      width: 100,
    },
    {
      title: '计划状态',
      dataIndex: 'completeState',
      key: 'completeState',
      width: 100,
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 150,
    },
  ]

  // 表格的操作列
  const wtable = ref()
  const operation = reactive<TableOperation[]>([
    {
      type: 'span',
      label: '详情',
      handleClick: (record: any) => {
        console.log('详情', record)
      },
    },
    {
      type: 'pop',
      label: '删除',
      message: '确认删除吗？',
      handleClick: (record: any) => {
        console.log('删除', record)
        deletePlan2Api({ id: record.id }).then(() => {
          wtable.value.queryDataFun()
        })
      },
    },
    {
      type: 'pop',
      label: '计划状态',
      handleClick: (record: any) => {
        console.log('冻结', record)
      },
    },
  ])
</script>
